<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        .main{
            
            width: 720px;
            height: 400px;
            background-color: pink;
            margin: auto;
            
        }
        .arrow-1{
            display: none;
            position: absolute;
            top: 150px;
            font-size: 60px;
            color:black;
            z-index: 2;
        }
        .arrow-2{
            display: none;
            position: absolute;
            right: 0;
            top: 150px;
            font-size: 60px;
            color: black;
            z-index: 2;

        }
    .focus{
        position: relative;
        width: 720px;
        height: 400px;
        overflow: hidden;
    }
    .focus ul{
        position: absolute;
        left: 0;
        top: 0;
        width: 400%;
        
    }
    .focus ul li {
        float: left;
       
    }
    .focus ul img{
        width: 720px;
        height:400px;
      
    }

    /* 小圆圈 */
    .circle{
        position: absolute;
        bottom: 0;
        left: 0;
        /* width: 130px; */
        height:30px;
      
    }
    .circle li{
        
        float: left;
        margin-left: 5px;
        width:30px;
        height: 30px;
        background-color: #fff;
        border-radius: 50%;
    }
   .circle .current{
       background-color: pink;
    }
    </style>
    <script src="/js/动画函数.js"></script>
    <script src="/js/轮播图.js"></script>
</head>
<body>
    <div class="main">
        <div class="focus">
            <a href="javascript:;" class="arrow-1">
                &lt;
            </a>
            <a href="javascript:;" class="arrow-2">
                &gt;
            </a>
            <!-- 核心滚动区域 -->
           <ul>
                <li>
                    <a href="#">
                        <img src="/7.jpg" alt="">
                    </a>
                </li>
                <!-- <li>
                    <a href="#">
                        <img src="/8.jpg" alt="">
                    </a>
                </li> -->
                 <li>
                    <a href="#">
                        <img src="/9.jpg" alt="">
                    </a>
                </li>
              <li>
                    <a href="#">
                        <img src="/10.jpg" alt="">
                    </a>
                </li>
                   
                
            </ul> 

            <ol class="circle">
               
            </ol>
        </div>

    </div>

    
</body>
</html>